import HttpUtils from "../../common/utils/HttpUtils";
import godown from "../../../../imgs/godown.png";
import VCity from "@module/../components/selectCity/cityselect";

//选择城市地点
export default function SelecteCity(props) {
    const [state, setState] = usePartState({
        citylist: null,
        show_citylist: false,
        city: "全国"
    });

    const inputStyle = {
        width: "60px",
        right: "17px",
        position: "absolute",
        zIndex: 1,
        opacity: 0,
        height: "30px"
    };

    function updateCity(value) {
        setState({ city: value });
        props.setCity(value == "全国" ? "" : value);
    }

    React.useEffect(() => {
        /*HttpUtils.cityList()
            .then(res => {
                setState({
                    citylist: ["全国"].concat(res.cityList)
                });
                console.log(res);
            })
            .catch(err => {
                console.log(err);
            });*/
        new VCity.CitySelector(
            { input: "selectCityInSearch" },
            { onChange: updateCity, noInput: true, offsetLeft: -150 }
        );
    }, []);

    const { citylist, show_citylist, city } = state;

    return (
        <div className={"search-page-sort-item-place"}>
            <div
                onClick={() => {
                    setState({
                        show_citylist: !show_citylist
                    });
                }}
                className={"search-page-sort-place-content"}
            >
                <p>{city}</p>
                <img src={godown} alt="" />
            </div>
            <input type="text" id="selectCityInSearch" style={inputStyle} />
            {show_citylist && (
                <div className={"search-page-sort-citylist"}>
                    <p className={"search-page-sort-citylist-cur"}>当前位置</p>
                    <p
                        onClick={() => {
                            setState({
                                show_citylist: false
                            });
                            props.setCity("");
                        }}
                        className={"search-page-sort-citylist-all"}
                    >
                        {city}
                    </p>
                    <p className={"search-page-sort-citylist-cur"}>选择位置</p>
                    {citylist &&
                        citylist.map(item => {
                            return (
                                <span
                                    onClick={() => {
                                        setState({
                                            show_citylist: false,
                                            city: item
                                        });
                                        props.setCity(
                                            item == "全国" ? "" : item
                                        );
                                    }}
                                >
                                    {item}
                                </span>
                            );
                        })}
                </div>
            )}
        </div>
    );
}
